<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.global.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/axios-helper.js"></script>
    <script src="//unpkg.com/element-plus"></script>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
</head>
<body>
<div id="app">
    <el-form :inline="true" :model="formInline" size="small" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="employeeDto.name" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item>
            <el-input v-model="employeeDto.sex" placeholder="请输入性别" clearable />
        </el-form-item>
        <el-form-item>
            <el-input v-model="employeeDto.depart" placeholder="请输入部门" clearable />
        </el-form-item>
        <el-form-item>
            <el-input v-model="employeeDto.salary" placeholder="请输入薪资" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="small" @click="query">搜 索</el-button>
        </el-form-item>
    </el-form>

    <el-row>
        <el-table :data="entities" stripe border style="width: 100%"
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" ></el-table-column>

            <el-table-column prop="id" label="id" width="50px"></el-table-column>
            <el-table-column prop="name" label="姓名" width="100px"></el-table-column>
            <el-table-column prop="sex" label="性别" width="100px"></el-table-column>
            <el-table-column prop="depart" label="部门" width="100px"></el-table-column>
            <el-table-column prop="salary" label="薪资" width="100px"></el-table-column>

            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">
                        编辑
                    </el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row)">
                        <el-icon><Delete /></el-icon>删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--        分页功能-->
        <el-pagination
                v-model:current-page="employeeDto.pageNumber"
                v-model:page-size="employeeDto.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :background="true"
                layout="total, sizes, prev, pager, next, jumper"
                :total="employeeDto.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
    </el-row>

    <el-dialog v-model="visible4Edit" title="编辑" width="500">
        <el-form :model="entity4Edit">
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                <el-input v-model="entity4Edit.name" autocomplete="off"/>
            </el-form-item>

            <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
                <el-input v-model="entity4Edit.sex" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="部门" :label-width="formLabelWidth" prop="depart">
                <el-input v-model="entity4Edit.depart" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="薪资" :label-width="formLabelWidth" prop="salary">
                <el-input v-model="entity4Edit.salary" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth" prop="deleted">
                <el-input v-model="entity4Edit.deleted" autocomplete="off" disabled/>
            </el-form-item>

        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelEdit">取消</el-button>
                <el-button type="primary" @click="Edit">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</div>
<script>
    const {createApp,ref,onMounted} = Vue;
    const app = createApp({
        setup(){
            const entities = ref([]);
            const pageNumber = ref(1)
            const pageSize = ref(5)
            const total = ref(0)
            const employeeDto = ref({
                name:'',
                sex:'',
                depart:'',
                salary:null,
                pageNumber:1,
                pageSize:5,
                total:0
            });

            //分页显示
            const handleSizeChange = val => {
                employeeDto.value.pageSize = val;
                query();
            }

            const handleCurrentChange = val => {
                employeeDto.value.pageNumber = val;
                query();
            }

            const query = () => {
                axios.post(`/employee/query`,employeeDto.value)
                    .then(result => {
                        entities.value = result.data.records;
                        console.log(entities.value)
                        employeeDto.value.total = result.data.total;
                    })
                    .catch(errorMsg => {
                        ElementPlus.ElMessage({type:"error",message:errorMsg,showClose:true})
                    })
            }


            const visible4Edit = ref(false);
            const entity4Edit = ref({});

            const cancelEdit = () => {
                visible4Edit.value = false;
                entity4Edit.value = {};
            }
            const Edit = () => {
                axios.post('/employee/update',entity4Edit.value)
                    .then(() => {
                        ElementPlus.ElMessage.success("编辑成功")
                        visible4Edit.value=false;
                        entity4Edit.value = {};
                        query();
                    })
                    .catch(errorMsg => {
                        ElementPlus.ElMessage({type:"error",message:errorMsg,showClose:true})
                    })
            }

            const handleEdit = row => {
                let json=JSON.stringify(row);
                entity4Edit.value=JSON.parse(json);
                visible4Edit.value=true;
            }

            onMounted(() =>{
                query();
            })

            return{
                entities,
                pageNumber,
                pageSize,
                total,
                employeeDto,
                handleSizeChange,
                handleCurrentChange,
                query,
                handleEdit,visible4Edit,entity4Edit,cancelEdit,Edit,
            }
        }
    })

    app.use(ElementPlus);
    app.mount('#app')
</script>
</body>
</html>